<!DOCTYPE HTML>
<html>
<head>
  <title>Arduino Remote Control</title>
  <meta name='author' content='Grupp2' />
  <meta name='description' content='arduino webserver' />
  <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<!-- Stilar -->
<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>
<style type='text/css'>
.debug {display: none; color: red;}
body, html {margin: 0;padding: 0; background-color: black;}
#page {	background: #222222; 
	margin: 0 auto; max-width: 960px;
	padding: 20px;
	font: 1.5em arial, verdana, sans-serif;
	height: 100%; 
	color: #EBEBEB;	
}
#logoutdiv {text-align: right; color: #CCC; padding: 0 5px;}
h1 {color: #CC4422; font-family: 'Averia Libre', sans; margin: auto; text-align:center}
input{color: #EBEBEB; background-color: rgba(0,0,0,.1); border: 2px solid #EBEBEB; width: 70px;}
.red {background-color: #CC4422;}
.green {background-color: #008b00;}
fieldset, input {
  padding: 5px;
  -moz-border-radius:10px;  
  border-radius: 10px;  
  -webkit-border-radius: 10px;
}
fieldset {border: 2px solid #008b00;padding: 10px 10px;}
fieldset div {padding: 0 10px;}
input{margin: 0 10px;}
legend{padding: 0 5px; margin: 0 70px; text-align: center;}
}
</style>
</head>
<body>
  <div id='page'>
    <div id='header'>
      <h1>Hemstyrning 3000 </h1>
    </div><!--/header-->
	<div id='content'>
	  <div id='logoutdiv'>
		<a href='/?logout'>Logout</a>
	  </div><!--/logoutdiv-->
	  <div id='ar_leds'>
		<form method='get' name='homepage'>
		  <fieldset>
			<legend>Temp</legend>
            <p>Sensor 1: 28.5&deg;C</p>
		  </fieldset>
          <fieldset>
            <legend>Arduino</legend>
            <div id='Lamp1'>LED 1
			  <input type='submit' name='L1' id='L1_ON' value='ON' />
			  <input type='submit' name='L1' id='L1_OFF' value='OFF' class='red'/>
	    </div><!--/Lamp1-->
			<div id='Lamp2'>
			  <p>
			  <b>LED 2 </b>
			  <input type='submit' name='L2' id='L2_ON' value='ON' class='green'/>
			  <input type='submit' name='L2' id='L2_OFF' value='OFF' />
			  </p>
			</div><!--/Lamp2-->
			<div id='Lamp3'>
			  <p>
			  <b>LED 3 </b>
			  <input type='submit' name='L3' id='L3_ON' value='ON' />
			  <input type='submit' name='L3' id='L3_OFF' value='OFF' class='red'/>
			  </p>
			</div><!--/Lamp3-->
			<div id='Lamp4'>
			  <p>
			  <b>LED 4 </b>
			  <input type='submit' name='L4' id='L4_ON' value='ON' class='green'/>
			  <input type='submit' name='L4' id='L4_OFF' value='OFF' />
			  </p>
			</div><!--/Lamp4-->
			<div id='ar_error'>
		      <p class='debug'>Debug: </p>
			</div><!--/ar_error-->
		  </fieldset>
		</form>
	  </div><!--/ar_leds-->
	  <div id='iar_leds'>
	    <form>
		  <fieldset>
		    <legend>IAR</legend>
      	    <div id='LED1'>
		      <p>
		   	  <b>LED 1 </b>
			  <input type='submit' name='IAR_L1' id='IAR_L1_ON' value='ON' class='green'/>
			  <input type='submit' name='IAR_L1' id='IAR_L1_OFF' value='OFF' />
			  </p>
		    </div><!--/LED1-->
		    <div id='LED2'>
		      <p>
		      <b>LED 2 </b>
			  <input type='submit' name='IAR_L2' id='IAR_L2_ON' value='ON' class='green'/>
			  <input type='submit' name='IAR_L2' id='IAR_L2_OFF' value='OFF' />
			  </p>
		    </div><!--/LED2-->
		    <div id='LED3'>
			  <p>
			  <b>LED 3 </b>
			  <input type='submit' name='IAR_L3' id='IAR_L3_ON' value='ON' />
			  <input type='submit' name='IAR_L3' id='IAR_L3_OFF' value='OFF' class='red'/>
			  </p>
		    </div><!--/LED3-->
		    <div id='LED4'>
			  <p>
			  <b>LED 4 </b>
			  <input type='submit' name='IAR_L4' id='IAR_L4_ON' value='ON' />
			  <input type='submit' name='IAR_L4' id='IAR_L4_OFF' value='OFF' class='red'/>
			  </p>
		    </div><!--/LED4-->
		    <div id='IAR_DISCO'>
			  <p>	
			  <b>Disco  </b>
			  <input type='submit' name='IAR_DISCO' id='IAR_DISCO_ON' value='ON'/>
			  </p>
		    </div><!--/IAR_DISCO-->
		    <div id='iar_error'>
			  <p class='debug'>Debug: </p>
		    </div><!--/iar_error-->
		  </fieldset>
	    </form>
	  </div><!--/iar_leds-->
	</div><!--/content-->
</div><!--/page-->
</body>
</html>
